import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { FormattedMessage, formatMessage } from 'umi/locale';
import { Row, Col, Button, Form, Select, Input, Modal } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const { Option } = Select;

const EditDeviceExtend = Form.create()(props => {
  const { modalVisible, form, handleModalVisible, handleEdit, detail } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleEdit(fieldsValue, form);
    });
  };
  return (
    <Modal
      title={formatMessage({ id: 'app.dm.devices.tcp.info.edit' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem style={{ marginBottom: 0 }}>
          {form.getFieldDecorator('id', { initialValue: detail ? detail.id : undefined })(
            <Input type="hidden" />,
          )}
        </FormItem>

        <FormItem label={formatMessage({ id: 'app.dm.devices.tcp.connType' })} colon={false}>
          {form.getFieldDecorator('connType', {
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.dm.devices.tcp.connType.place' }),
              },
            ],
            initialValue: detail ? detail.connType : 1,
          })(
            <Select
              allowClear
              style={{ width: 485 }}
              placeholder={formatMessage({ id: 'app.dm.devices.tcp.connType.place' })}
            >
              <Option value={1}>
                <FormattedMessage id="app.dm.devices.tcp.conntype.client" />
              </Option>
              <Option value={2}>
                <FormattedMessage id="app.dm.devices.tcp.conntype.service" />
              </Option>
            </Select>,
          )}
        </FormItem>
        {form.getFieldValue('connType') === 1 ? (
          <div>
            <FormItem label={formatMessage({ id: 'app.dm.devices.tcp.deviceIp' })} colon={false}>
              {form.getFieldDecorator('deviceIp', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'app.dm.devices.tcp.deviceIp.place' }),
                  },
                ],
                initialValue: detail ? detail.deviceIp : undefined,
              })(
                <Input placeholder={formatMessage({ id: 'app.dm.devices.tcp.deviceIp.place' })} />,
              )}
            </FormItem>
            <FormItem label={formatMessage({ id: 'app.dm.devices.tcp.devicePort' })} colon={false}>
              {form.getFieldDecorator('devicePort', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'app.dm.devices.tcp.devicePort.place' }),
                  },
                ],
                initialValue: detail ? detail.devicePort : undefined,
              })(
                <Input
                  placeholder={formatMessage({ id: 'app.dm.devices.tcp.devicePort.place' })}
                />,
              )}
            </FormItem>
          </div>
        ) : (
          undefined
        )}
        <FormItem label={formatMessage({ id: 'app.dm.devices.tcp.collectionIp' })} colon={false}>
          {form.getFieldDecorator('collectionIp', {
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.dm.devices.tcp.collectionIp.place' }),
              },
            ],
            initialValue: detail ? detail.collectionIp : undefined,
          })(
            <Input placeholder={formatMessage({ id: 'app.dm.devices.tcp.collectionIp.place' })} />,
          )}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.dm.devices.tcp.collectionPort' })} colon={false}>
          {form.getFieldDecorator('collectionPort', {
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.dm.devices.tcp.collectionPort.place' }),
              },
            ],
            initialValue: detail ? detail.collectionPort : undefined,
          })(
            <Input
              placeholder={formatMessage({ id: 'app.dm.devices.tcp.collectionPort.place' })}
            />,
          )}
        </FormItem>
      </div>
    </Modal>
  );
});
@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
class DeviceModbus extends PureComponent {
  state = {
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch, params } = this.props;
    dispatch({
      type: 'devices/fetchDeviceExtend',
      payload: params.id,
    });
  }

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleEdit = (fieldsValue, form) => {
    const { dispatch, params } = this.props;
    const { handleModalVisible } = this;
    dispatch({
      type: 'devices/saveOrEditDeviceExtend',
      payload: {
        id: fieldsValue.id,
        deviceId: params.id,
        connType: fieldsValue.connType,
        deviceIp: fieldsValue.deviceIp,
        devicePort: fieldsValue.devicePort,
        collectionIp: fieldsValue.collectionIp,
        collectionPort: fieldsValue.collectionPort,
      },
      form,
      handleModalVisible,
    });
  };

  render() {
    const {
      devices: { deviceExtend },
    } = this.props;

    const { modalVisible } = this.state;

    const showConnType = type => {
      if (type === 1) {
        return <FormattedMessage id="app.dm.devices.tcp.conntype.client" />;
      }
      if (type === 2) {
        return <FormattedMessage id="app.dm.devices.tcp.conntype.service" />;
      }
      return null;
    };

    const edit = flag => {
      this.setState({
        modalVisible: !!flag,
      });
    };

    const parentMethods = {
      detail: deviceExtend,
      handleEdit: this.handleEdit,
      handleModalVisible: this.handleModalVisible,
    };

    return (
      <Fragment>
        <Row style={{ textAlign: 'right' }}>
          <Button onClick={() => edit(true)} type="primary">
            <FormattedMessage id="app.dm.devices.tcp.info.edit" />
          </Button>
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.tcp.connType" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {deviceExtend ? showConnType(deviceExtend.connType) : undefined}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.tcp.deviceIp" />
          </Col>
          <Col className={styles.info_con} span={5}>
            <span>{deviceExtend ? deviceExtend.deviceIp : undefined}</span>
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.tcp.devicePort" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            <span>{deviceExtend ? deviceExtend.devicePort : undefined}</span>
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.devices.tcp.collectionIp" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={5}>
            {deviceExtend ? deviceExtend.collectionIp : undefined}
          </Col>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.devices.tcp.collectionPort" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={13}>
            <span>{deviceExtend ? deviceExtend.collectionPort : undefined}</span>
          </Col>
        </Row>
        <EditDeviceExtend {...parentMethods} modalVisible={modalVisible} />
      </Fragment>
    );
  }
}

export default DeviceModbus;
